<%--
  Created by IntelliJ IDEA.
  User: wwj
  Date: 2020/6/18
  Time: 13:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <%--把layui的样式引入--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <%--引入layui的js文件--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <%--引入jquery的代码引入--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/jquery-3.4.1.js"></script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        <!-- 这里同样支持 laytpl 语法，如： -->
        {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
    </script>

    <!--工具栏-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn" id="addBtn">添加</button>
            <button type="button" class="layui-btn" id="addListBtn">批量添加</button>
            <button type="button" class="layui-btn" id="upListBtn"  >批量下载</button>
            <button type="button" class="layui-btn" id="delManyBtu">批量删除</button>
        </div>
    </script>
    <!--工具栏-->


    <script type="text/javascript">
        layui.use(['form','laydate','layer','table','upload'],function() {
            var form = layui.form;
            var upload = layui.upload;
            var layerIndex;
            //把form表单给渲染好了。
            var table=layui.table;
            var layer=layui.layer;
            var laydate=layui.laydate;
            //给select标签添加内容。从数据库表中把所有的部门查询出来。

            table.render({
                elem: '#MyTable'
                ,url: '${pageContext.request.contextPath}/banner/selectByPage' //调用控制器得到所有要展示的数据
                ,page: true //开启分页
                ,toolbar: '#toolbarDemo'
                ,cols: [[ //表头
                    {field: 'bannerId', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'bannerImageUrl', title: 'bannerImageUrl',  sort: true,templet:function (d) {
                        return "<img src=\"${pageContext.request.contextPath}/"+d.bannerImageUrl+"\" >" }}
                    ,{field: 'bannerOldName',title: '原有名称',  sort: true}
                    ,{field: 'bannerState',title: 'bannerState',  sort: true}
                    ,{field: 'bannerDate',title: '上传时间',  sort: true}
                     ,{field: 'bannerDescription',title: 'bannerDescription',  sort: true}
                    ,{fixed: 'right',  align:'center',  toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                ]]
                ,id: 'testReload'
                , method: "post"
            });
            //把form表单结束



            //监听工具条
            table.on('tool(MyTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){

                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/banner/deleteBanner",
                            data:"id="+data.bannerId,
                            dataType:"json",
                            type:"post",
                            success:function (data) {
                                if (data.dalete=true){
                                    alert("删除成功")
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                }else {
                                    alert("删除失败")
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if(layEvent === 'edit'){
                    //do something
                    layer.confirm('真的要修改么?',function (index) {
                        $.ajax({
                            url:"${pageContext.request.contextPath}/banner/selectOne"
                            ,data:"id="+data.bannerId
                            ,type:"post"
                            ,success:function (data) {
                                console.log(data)
                                $("#Logsrc").prop("src",data.userImage);
                                form.val("updateForm",JSON.parse(JSON.stringify(data)))
                                layer.open({
                                    title:"修改",
                                    type:1,
                                    content: $("#updateForm"),
                                    area: "500px"
                                })
                            }
                        })
                    })
                }
                //修改的结束
            });
            /*table表格的操作功能结束*/


            //上传文件开始
            var uploadInst = upload.render({
                elem: '#imageID' //绑定元素
                ,url: "${pageContext.request.contextPath}/upload/upload" //上传接口
                ,accept: 'file'
                ,done: function(res){//回调函数，上传成功后会执行这个方法。res是控制器返回的map，map里面有code和res
                    if(res.code==0){
                        var fileName=res.src;
                        //后面提交表单是要把这个fileName传给数据库表
                        $("[name='bannerImageUrl']").val(fileName);
                    }
                }
            });
            //上传文件结束

            //上传文件开始
            var uploadInst = upload.render({
                elem: '#imageIDS' //绑定元素
                ,url: "${pageContext.request.contextPath}/upload/upload" //上传接口
                ,accept: 'file'
                ,done: function(res){//回调函数，上传成功后会执行这个方法。res是控制器返回的map，map里面有code和res
                    if(res.code==0){
                        var fileName=res.src;
                        //后面提交表单是要把这个fileName传给数据库表
                        $("[name='bannerImageUrl']").val(fileName);
                    }
                }
            });
            //上传文件结束
            //批量开始
            var uploadInst = upload.render({
                elem: '#addListBtn' //绑定元素
                ,url: "${pageContext.request.contextPath}/banner/uploadList" //上传接口
                ,accept: 'file'
                ,done: function(res){//回调函数，上传成功后会执行这个方法。res是控制器返回的map，map里面有code和res
                    if(res.insert=true){
                        //执行重载
                        table.reload('testReload', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        }, 'data');

                        alert("批量添加成功")
                    }else {
                        alert("批量添加失败")
                    }
                }
            });
            //批量结束


            //给添加按钮增加点击事件---开始
            $("#addBtn").click(function(){
                //显示弹出层
                layerIndex=layer.open({
                    type:1,
                    title:"出库",
                    area:"500px",
                    content:$("#addForm")
                });
                //alert(index);
            });
            //给添加按钮增加点击事件---结束
            //添加的form表单
            form.on('submit(addGO)', function(data){
                // $("[name='name']").val();
                // $("[name='price']").val();

                var data=$("#addForm").serialize();//自动将表单中所有   的需要传递的表单元素的值封装成我们需要的格式。key=value&key=value
                //发出ajax请求。
                $.ajax({
                    url: "${pageContext.request.contextPath}/banner/addBanner",
                    data: data,
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        if(data.insert=true){
                            alert("添加成功！");
                            table.reload("MyTable");
                        }else{
                            alert("添加失败");
                        }
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //添加的form表单

            //给表单修改提交事件----开始
            form.on('submit(updateGo)', function(data){
                var data=$("#updateForm").serialize();//自动将表单中所有的需要传递的表单元素的值封装成我们需要的格式。key=value&key=value
                //发出ajax请求。
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/updateBanner",
                    data:data,
                    dataType:"json",
                    type:"post",
                    success:function(data){
                        if(data.update==true){
                            //关闭掉添加图书的弹出层
                            layer.close(layerIndex);
                            //把表单里面的数据清除掉。
                            //把jquery对象转换为dom对象。form类型的dom对象有reset方法可以对表单进行重置
                            $("#addForm").get(0).reset();
                            //弹出层提示添加成功，还要关闭
                            layer.msg("修改成功！");
                            //对table进行重新加载
                            table.reload("MyTable");
                        }else{
                            alert("修改失败");
                        }
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            //给表单修改提交事件-----结束

            $("#upListBtn").click(function () {
                location="${pageContext.request.contextPath}/banner/downloadList.xls";
            })

        })

        //做搜索操作
        function doSearch() {
            //1.获取到输入框中输入的内容
            //2.重新发送请求，重新加载数据

            var $ = layui.jquery;
            var name = $("#doSearchname").val();
            var phone = $("#doSearchPhone").val();
            //alert(username)

            //需要一个功能：让已经渲染好的table，重新加载重新展示数据
            //当需要一个功能的时候，就应该考虑layui的table模块是否定义的有方法===》到table模块的基础方法中找
            //table模块提供了一个reload方法可以实现数据重载
            //reload(ID,options);
            //其中ID:就是table标签的id，就是elem基础参数写的内容
            //options:就是基础参数;在刚刚渲染的基础上再添加的基础参数

            var table = layui.table;
            table.reload("MyTable",{where:{"username":name,}});
        }

    </script>
</head>
<body>




<%--搜索--%>
<div class="layui-container">
    <div class="layui-input-inline" style="width: 300px;">
        <input type="text" id="doSearchname" placeholder="请输入要搜索名字" class="layui-input">
    </div>
    <button type="button" class="layui-btn" onclick="doSearch()">搜索</button>
    <table id="MyTable" lay-filter="MyTable"></table>
</div>
<%--搜索--%>


<%--<添加的开始>--%>
<form class="layui-form"  id="addForm" lay-filter="addForm"  style="display:none;padding:10px 50px 0px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->


    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <%--上传头像--%>
            <button type="button" class="layui-btn" id="imageID">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="bannerImageUrl" value=""/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">原有名称</label>
        <div class="layui-input-block">
            <input type="text" name="bannerOldName"  placeholder="原有名称" autocomplete="off" class="layui-input" >
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">bannerState</label>
        <div class="layui-input-block">
            <input type="radio" name="bannerState" value="0" title="0" checked>
            <input type="radio" name="bannerState" value="1" title="1" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="date" name="bannerDate"  placeholder="bannerState" autocomplete="off" class="layui-input" >

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">bannerDescription</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription"  placeholder="bannerDescription" autocomplete="off" class="layui-input" >
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addGO">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--<添加的结束>--%>




<%--修改图书的表单开始--%>
<form class="layui-form" style="display:none;padding:10px 50px 0px 10px" id="updateForm" lay-filter="updateForm">
    <!--对于修改操作，在提交表单的时候必须把id传递到后台-->
    <input type="hidden" name="bannerId" />

    <div class="layui-form-item">
        <label class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
            <%--上传头像--%>
            <button type="button" class="layui-btn" id="imageIDS">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="bannerImageUrl" value=""/>
        </div>
    </div>

  <div class="layui-form-item">
    <label class="layui-form-label">原有名称</label>
    <div class="layui-input-block">
        <input type="text" name="bannerOldName"  placeholder="原有名称" autocomplete="off" class="layui-input" >
    </div>
</div>

    <div class="layui-form-item">
        <label class="layui-form-label">bannerState</label>
        <div class="layui-input-block">
            <input type="radio" name="bannerState" value="0" title="0" checked>
            <input type="radio" name="bannerState" value="1" title="1" >
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">上传时间</label>
        <div class="layui-input-block">
            <input type="date" name="bannerDate"  placeholder="bannerState" autocomplete="off" class="layui-input" >

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">bannerDescription</label>
        <div class="layui-input-block">
            <input type="text" name="bannerDescription"  placeholder="bannerDescription" autocomplete="off" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateGo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--修改图书的表单结束--%>







</body>
</html>